<script setup>
import { ref, reactive, onMounted,nextTick, getCurrentInstance } from 'vue'

import { ElMessage,ElMessageBox } from 'element-plus'
import {get,post}  from '@/myaxios'




/**删除功能 */
const deleteFormOpen = async (row) => {
    ElMessageBox.confirm(`确定删除[${row.categoryId}-${row.categoryName}]吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("playRoomCategory/delete", row)
        })
        .catch(() => {
          console.log('cancel');
        })
}


/**修改功能 */
const editDialogVisible = ref(false)
const editForm = reactive({
    editData: {
        categoryId: '',
        categoryName: '',
        parentId: ''
    }
})
const editFormSubmit = async () => {
    if (editForm.editData.categoryId ==editForm.editData.parentId) {
        ElMessage.error('不要选择自己作为上级')
        return
    }
    editDialogVisible.value = false;
     operationData("playRoomCategory/edit", editForm.editData)
}
const editFormOpen = async (row) => {
  editDialogVisible.value = true;
  const resp = await get("playRoomCategory/getCategoryById", { categoryId: row.categoryId });
  if (resp.data.code === 2000) {
    editForm.editData = resp.data.returnData;
  }
}

/**添加功能 */
const addDialogVisible = ref(false)
const addForm = reactive({
    categoryId: '',
    categoryName: '',
    parentId: ''
})
const addFormRef = ref()
const addFormSubmit = async () => {
    addDialogVisible.value = false;
     operationData("playRoomCategory/add", addForm)
}

const addFormOpen = async () => {
  addDialogVisible.value = true;
  nextTick(() => {
    addFormRef.value.resetFields();
  })
}


/**
 * 条件查询
 * 
 */
const queryForm = reactive({
    categoryName: '',
    parentId: ''
})

const onSubmit = ()=>{
  queryData(queryForm);
}
const onReset = ()=>{
  queryFormRef.value.resetFields();
  queryData({});
}
//pid下拉列表使用的动态数据
const optionsList = reactive({optionsData:[]}) 

//获得查询表单组件对象
const queryFormRef = ref()



/**
 * 分页组件
 */
//分页组件参数对象
const pageInfo = reactive({
  pageData: {
    page: 1,
    pageSize: 10,
    total: 77
  }
})
//分页组件函数
//页码改变
const handleCurrentChange = (val) => {
  console.log(val);
  //通过对象操作数据 通过工具转成需要的格式
  pageInfo.pageData.page = val;
  //合并对象
  let paramsObj ={...pageInfo.pageData,...queryForm};
  queryData(paramsObj);

}
//每页显示记录改变
const handleSizeChange = (val) => {
  console.log(val);
  pageInfo.pageData.page = 1;
  pageInfo.pageData.pageSize = val;
  //合并对象
  let paramsObj ={...pageInfo.pageData,...queryForm};
  queryData(paramsObj);

}
//table列表数据
const tableList = reactive({ tableData: [] })


/**
 * 公共函数
 * 
 */
//查询公共函数
const queryData = async (params) => {
  const resp = await get("playRoomCategory/query", params);
  if (resp.data.code === 2000) {
    // 更新table数据
    tableList.tableData = resp.data.returnData;
    // 更新分页组件数据
    pageInfo.pageData = resp.data.pageInfo;
  } else if (resp.data.code === 2001) {
    tableList.tableData = [];
    pageInfo.pageData = { page: 1, pageSize: 10, total: 0 };
  }
}
const querySelect = async () => {
  const resp = await get("/playRoomCategory/listCategoryForSelect", {});
  if (resp.data.code === 2000) {
    optionsList.optionsData = resp.data.returnData;
  }
}
const operationData = async (url, params) => {
  const resp = await post(url, params);
  console.log(resp);
  // 根据执行结果 显示操作反馈
  if (resp.data.code === 2010) {
    ElMessage.success(resp.data.msg)
  } else if (resp.data.code === 2011) {
    ElMessage.error(resp.data.msg)
  }
  // 刷新table和分页数据
  // 在当前查询条件下 刷新数据
  let paramsObj = { ...pageInfo.pageData, ...queryForm };
  queryData(paramsObj);
  // 刷新与菜单相关的一级菜单下拉列表
  querySelect();
}


onMounted(() => {
  //首次查询table数据
  queryData({});
  //查询pid下拉列表的选项值 动态生成
  querySelect();

})
</script>

<template>
  <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-form-item label="类别名称" prop="categoryName">
            <el-input v-model="queryForm.categoryName" placeholder="categoryName" />
        </el-form-item>
        <el-form-item label="上级类别" prop="parentId">
            <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
            <el-select style="width: 220px;"
                v-model="queryForm.parentId"
                placeholder="parentId">
                <el-option label="无" :value="0" />
                <el-option v-for="options in optionsList.optionsData" :label="options.categoryName" :value="options.categoryId" />
            </el-select>

        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
            <el-button type="primary" plain @click="addFormOpen">添加</el-button>

        </el-form-item>
    </el-form>
    <el-table height="500px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column prop="categoryId" label="类别编号" width="180"></el-table-column>
        <el-table-column prop="categoryName" label="类别名称" width="180"></el-table-column>
        <el-table-column prop="parentId" label="上级编号" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.parentId == 0" type="primary">{{ scope.row.parentId }}</el-tag>
                <el-tag v-else type="warning">{{ scope.row.parentId }}</el-tag>
            </template>

        </el-table-column>
        <el-table-column prop="parentName" label="上级名称" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.parentId == 0" type="primary">{{ scope.row.parentName }}</el-tag>
                <el-tag v-else type="warning">{{ scope.row.parentName }}</el-tag>
            </template>

        </el-table-column>

        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="editFormOpen(scope.row)">编辑</el-button>
                <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      <!-- 添加对话框 -->
  <el-dialog v-model="addDialogVisible" title="添加" width="500">
    <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 400px">
        <el-form-item label="类别编号" prop="categoryId">
        <el-input v-model="addForm.categoryId" placeholder="categoryId" />
      </el-form-item>
      <el-form-item label="类别名称" prop="categoryName">
        <el-input v-model="addForm.categoryName" placeholder="categoryName" />
      </el-form-item>
      <el-form-item label="上级类别" prop="parentId">
        <el-select style="width: 100%;"
                v-model="addForm.parentId"
                placeholder="parentId">
                <el-option label="无" :value="0" />
                <el-option v-for="options in optionsList.optionsData" :label="options.categoryName" :value="options.categoryId" />
            </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="editDialogVisible" title="修改" width="500">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 400px">
        <el-form-item label="类别编号" prop="categoryId">
        <el-input v-model="editForm.editData.categoryId" disabled placeholder="categoryId" />
      </el-form-item>
      <el-form-item label="类别名称" prop="categoryName">
        <el-input v-model="editForm.editData.categoryName" placeholder="categoryName" />
      </el-form-item>
      <el-form-item label="上级类别" prop="parentId">
        <el-select style="width: 100%;"
                v-model="editForm.editData.parentId"
                placeholder="parentId">
                <el-option label="无" :value="0" />
                <el-option v-for="options in optionsList.optionsData" :label="options.categoryName" :value="options.categoryId" />
            </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
